<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Drag on Object with Origin</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body>
    <div id="main" style="width:1000px;height:500px;"></div>
    <script type="text/javascript">
        var qr = qrenderer.init(document.getElementById('main'));
        const image = new qrenderer.Image({
            draggable: true,
            rotation: 2,
            origin: [50, 50],
            style: {
                image: './data/test.png',
                height: 100,
                width: 100
            }
        })

        const group = new qrenderer.Group({
            position: [100, 100]
        })
        const image2 = new qrenderer.Image({
            draggable: true,
            rotation: 2,
            origin: [50, 50],
            style: {
                image: './data/test.png',
                height: 100,
                width: 100
            }
        })

        qr.add(image);
        qr.add(group);
        group.add(image2);
    </script>
</body>
</html>